<template>
  <div class="layout" style="height: 100%;">
       <Layout>
           <Sider :width="400" :style="{position: 'fixed', height: '100vh', left: 0, overflow: 'auto'}">
               <exam-person-info></exam-person-info>
           </Sider>
           <Layout :style="{marginLeft: '400px'}">
             <!-- <Header class="layout-header-bar"></Header> -->
              <Content :style="{minHeight: '220px', position: 'absolute', top: '20px',right: '20px',left: '420px',bottom: '20px', overflow: 'auto'}">
                <Row style="margin: 10px 0px;">
                  <label style="margin-left: 10px;">试卷类型</label>
                  <Select v-model="condition.testtype" style="width:100px">
                    <Option v-for="item in roles" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
                  <label>试卷标题</label>
                  <Input v-model="condition.testtitle" placeholder="请输入试卷标题" clearable style="width: 200px"></Input>
                  <label>考试时间</label>
                  <DatePicker type="daterange" v-model="condition.submitdate" :options="submitdateoptions" placement="bottom-end" placeholder="请选择考试时间段" style="width: 200px"></DatePicker>
                  <span style="margin: 0px 10px;">
                    <button type="button" class="ivu-btn ivu-btn-primary"  @click="search()">
                      <i class="ivu-icon ivu-icon-search"></i>
                      <span>查询</span>
                    </button>
                  </span>
                </Row>
                <Table :columns="columns" :data="model.rows" border></Table>
                <Row style="margin: 10px 0px;">
                    <Page :total="model.count" :page-size="model.pageSize" show-elevator style="text-align: center;" @on-change="loadPage"></Page>
                </Row>
                <Spin size="large" fix v-if="model.state === '查询'"></Spin>
              </Content>
           </Layout>
       </Layout>

       <Modal :width="1366" v-model="show" title="试卷详情" id="exam-person">
         <paper-preview :data="paperData"></paper-preview>
         <div slot="footer">
         </div>
       </Modal>
   </div>
</template>
<script>
import util from '@/libs/util.js';
import PagedList from '@/plugins/PagedList.js'
import axios from 'axios'
import examPersonInfo from './exam-person-info'
import paperPreview from '../preview/paper-preview.vue'

    export default {
      components: {
        examPersonInfo,
        paperPreview
      },
      name: 'exam-person',
        data () {
            return {
              // 查看试卷相关
              show: false,
              paperData: {},
              model: new PagedList('rs/sql/oldgetusertestpaeper', 20,
              {items: "'*'", tablename: "'usertable'", orderitem: "'id'"}),
              show: false,
              condition: {
                testtype: '',
                testtitle: '',
                submitdate: []
              },
              role: {
                username: '',
                sex: '男',
                usernum: '',
                idnumber: '',
                userphone: '',
                unit: '',
                policeclass: '',
                job: '',
                emal: '',
                usertype: '考生',
                examnum: util.getCanNumver(),
                password: ''
              },
              columns: [
                  {
                    title: '序号',
                    type: 'index',
                    align: 'center',
                    width: 80
                  },
                  {
                      title: '试卷标题',
                      key: 'testtitle'
                  },
                  {
                      title: '总分',
                      key: 'testnum',
                      align: 'center',
                      width: 70
                  },
                  {
                      title: '试卷类型',
                      key: 'testtype',
                      align: 'center',
                      width: 100
                  },
                  {
                      title: '开始时间',
                      key: 'teststartdate',
                      align: 'center',
                      width: 180
                  },
                  {
                      title: '答题时长',
                      key: 'answertimelong',
                      align: 'center',
                      width: 120
                  },
                  {
                      title: '最终得分',
                      key: 'examusernum',
                      align: 'center',
                      width: 100
                  },
                  {
                      title: '是否是模拟',
                      key: 'modelflag',
                      align: 'center',
                      width: 100
                  },
                  {
                      title: '操作',
                      width: 80,
                      align: 'center',
                      render: (h, params) => {
                          return h('Button', {
                            props: {
                                type: 'text'
                            },
                            style: {
                              padding: '0'
                            },
                            on: {
                                click: () => {
                                    this.checkPaper(params.row)
                                }
                            }
                          }, '查看试卷');
                      }
                  }
              ],
              roles: [
                  {
                      value: '',
                      label: '全部'
                  },
                  {
                      value: '综合试题',
                      label: '综合试题'
                  },
                  {
                      value: '单一试题',
                      label: '单一试题'
                  }
              ],
              submitdateoptions: {
                  shortcuts: [
                      {
                          text: '一周内',
                          value () {
                              const end = new Date();
                              const start = new Date();
                              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                              return [start, end];
                          }
                      },
                      {
                          text: '一月内',
                          value () {
                              const end = new Date();
                              const start = new Date();
                              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                              return [start, end];
                          }
                      },
                      {
                          text: '三月内',
                          value () {
                              const end = new Date();
                              const start = new Date();
                              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                              return [start, end];
                          }
                      }
                  ]
              },
            }
        },
        mounted () {
          this.search('1=1')
        },
        methods: {
          search () {
            let condition = '1=1'
            if (this.condition.testtype.length > 0) {
              condition += ` and testtype = '${this.condition.testtype}'`
            }
            if (this.condition.testtitle.length > 0) {
              condition += ` and t.testtitle like '%${this.condition.testtitle}%'`
            }
            if (this.condition.submitdate[0]) {
              condition += ` and submitdate > '${this.$formatYMD(this.condition.submitdate[0])} 00:00:0'
              and  submitdate < '${this.$formatYMD(this.condition.submitdate[1])} 23:59:59'`
            }
            condition += ` and userid = '${this.$store.state.examer.examineeinfo.userid}'`
            this.model.search(condition)
          },
          addRole () {
            this.show = true;
          },
          loadPage (index) {
              // console.log(`加载第${index}页数据`);
              this.model.loadPage(index)
          },
           confirm (name) {
             this.model.state = '查询'
             this.$refs[name].validate((valid) => {
                  if (valid) {
                    // 提交到后台后将对话窗关闭
                    if (!this.role.id) {
                      this.role.creatuserpp = '测试'
                      this.role.creatusertime = this.$formatDateTime(new Date())
                    }
                    if (this.role.usertype === '管理员') {
                      this.role.examnum = null
                    }
                    axios.post('rs/logic/adduser', {data: this.role}).then(res => {
                      this.model.refresh()
                      this.show = false
                    }).catch((error) => {
                      // console.log(error);
                      this.$Message.error('保存失败');
                    })

                  }
              })
           },
           changed (status) {
             this.model.state = '正确'
             if (!status) {
               this.role = {
                 username: '',
                 usernum: '',
                 idnumber: '',
                 userphone: '',
                 emal: '',
                 sex: '男',
                 unit: '',
                 policeclass: '',
                 job: '',
                 usertype: '考生',
                 examnum: util.getCanNumver(),
                 password: ''
               }
                this.$refs['formValidate'].resetFields();
             }
           },
           modify (row) {
             this.role = Object.assign({}, row)
             this.show = true
           },
           deleteRow (row) {
             this.$Modal.confirm({title: '删除提醒', content: '删除后不可恢复，确认删除吗？', onOk: () => {
               axios.delete('rs/entity/usertable/'+ row.id).then((res) => {
                 this.model.refresh()
               })
             }})
           },
           upSuccess (res, file, fileList) {
             this.model.state = '正确'
             this.$Message.success({
               content: '批量导入成功'
             })
             this.search('1=1')
           },
           upError (error, file, fileList) {
             this.model.state = '正确'
             this.$Message.error({
               content: '上传失败'
             })
           },
           upProgress (events, file, fileList) {
             this.model.state = '查询'
           },
           checkPaper (row) {
             this.show = true
             // 获取试卷
             axios.post('rs/logic/getusertestquinfo', {data: {testid: row.id, userid: row.userid}}).then(res => {
               this.paperData = {
                 modeltestflag : "false",
                 testinfo: res.data.testinfo,
                 tests: [res.data.oneques, res.data.douques, res.data.judques],
                 userinfo: row
               }
               // this.show = false
             }).catch(error => {
               this.$Message.warning({
                 content: '获取试卷失败'
               })
             }).finally(() => {

             })
           },
        },
        // watch: {
        //   'role.role' (val) {
        //     if (val === 'examinee') {
        //       this.role.canNumber = util.getCanNumver()
        //     } else {
        //       this.role.canNumber = ''
        //     }
        //   }
        // }
    };
</script>
<style scoped>
.layout{
      border: 1px solid #d7dde4;
      /* background: #f5f7f9; */
      position: relative;
      border-radius: 4px;
      overflow: hidden;
  }
  .layout-header-bar{
      background: #fff;
      box-shadow: 0 1px 1px rgba(0,0,0,.1);
  }

</style>
